<template>
    <div>
        <van-dropdown-menu>
            <van-dropdown-item v-model="value" :options="option" />
            <van-dropdown-item title="筛选" ref="item">
                <van-cell center title="近地铁">
                <template #right-icon>
                    <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
                </template>
                </van-cell>
                <van-cell center title="拎包入住">
                <template #right-icon>
                    <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
                </template>
                </van-cell>
                 <van-cell center title="精装修">
                <template #right-icon>
                    <van-switch v-model="switch3" size="24" active-color="#ee0a24" />
                </template>
                </van-cell>
                 <van-cell center title="集中供暖">
                <template #right-icon>
                    <van-switch v-model="switch4" size="24" active-color="#ee0a24" />
                </template>
                </van-cell>
                <div style="padding: 5px 16px;">
                <van-button type="danger" block round @click="onConfirm">
                    确认
                </van-button>
                </div>
            </van-dropdown-item>
        </van-dropdown-menu>
    </div>
</template>
<script>
export default {
     data() {
    return {
      value: 0,
      switch1: false,
      switch2: false,
      switch3: false,
      switch4: false,
      option: [
        { text: '整租', value: 0 },
        { text: '合租', value: 1 },
      ],
    };
  },
  methods: {
    onConfirm() {
      this.$refs.item.toggle();
    },
  },
}
</script>
<style  scoped>

</style>